
import { NavBar, Icon, Checkbox, Modal, Button, Toast } from 'antd-mobile';
import "./index.scss";
import { connect } from 'react-redux';
import { getUser, getWorkLike, emptyUserLike, emptyWorksLike, removeWorksLike, removeLike } from './../../action/action';
import { getCookie, setCookie } from '../../js/cookie';
const CheckboxItem = Checkbox.CheckboxItem;
const alert = Modal.alert;
let count = [];
@connect(
    state => {
        return {
            workLikeData: state.video.workLikeData
        }
    }
)
export class MyLike extends React.Component {
    componentDidMount() {
        let { dispatch } = this.props;
        dispatch(getUser(getCookie("ky_uid"), (data) => {
            dispatch(getWorkLike(data.result.ulike, (data) => { }))
        }));
    }
    del() {
        let { dispatch } = this.props;
        if (count.length !== 0) {
            count.map((item, index) => {
                dispatch(removeWorksLike(getCookie("ky_uid"), item, (data) => { }))
                dispatch(removeLike(getCookie("ky_uid"), item, (data) => {
                    if (data.code == 1) {
                        Toast.info("删除成功", 1)
                    } else {
                        Toast.info("删除失败", 1)
                    }
                    dispatch(getUser(getCookie("ky_uid"), (data) => {
                        dispatch(getWorkLike(data.result.ulike, (data) => {
                            if (data.length == 0) {
                                this.refs.foot.className = "";
                                this.refs.edit.innerHTML = "编辑";
                                this.refs.delete.style.color = "#666";
                                count = [];
                            }
                        }))
                    }));
                }))
            })
        }
    }
    onChange = (e, val) => {
        e.stopPropagation();
        if (count.indexOf(val) == -1) {
            count.push(val)
        } else {
            count.splice(count.indexOf(val), 1)
        }
        if (count.length !== 0) {
            this.refs.delete.style.color = "#108ee9";
        } else {
            this.refs.delete.style.color = "#666";
        }
    }
    empty() {
        alert('是否清空视频???', '', [
            { text: '取消', onPress: () => console.log('') },
            {
                text: '确定', onPress: () => {
                    let { dispatch } = this.props;
                    dispatch(emptyWorksLike(getCookie("ky_uid"), (data) => { }))
                    dispatch(emptyUserLike(getCookie("ky_uid"), (data) => {
                        Toast.info(data.msg, 1)
                        dispatch(getUser(getCookie("ky_uid"), (data) => {
                            dispatch(getWorkLike(data.result.ulike, (data) => {
                                if (data.length == 0) {
                                    this.refs.foot.className = "";
                                    this.refs.edit.innerHTML = "编辑";
                                    this.refs.delete.style.color = "#666";
                                    count = [];
                                }
                            }))
                        }));
                    }))
                }
            },
        ])
    }
    edit(e) {
        e.stopPropagation();
        let checkbox = document.getElementsByClassName("am-checkbox");
        if (this.refs.edit.innerHTML == "编辑") {
            for (var i = 0; i < checkbox.length; i++) {
                checkbox[i].style.display = "inline-block";
            }
            this.refs.foot.className = "active";
            this.refs.edit.innerHTML = "取消"
        } else {
            for (var i = 0; i < checkbox.length; i++) {
                checkbox[i].style.display = "none";
            }
            this.refs.foot.className = "";
            this.refs.edit.innerHTML = "编辑"
        }
    }
    render() {
        let { workLikeData } = this.props;
        let workLikeList = null;
        if (workLikeData) {
            if (workLikeData.length !== 0) {
                workLikeList = workLikeData.map((item, index) => {
                    return (<li key={index}>
                        <CheckboxItem key={index} onChange={($event) => this.onChange($event, item.vid)}>
                            <div className="list-info cl">
                                <div className="left-img">
                                    <a onClick={() => { setCookie("ky_history_url", this.props.match.url, 7); this.props.history.push("/video/" + item.vid); }}>
                                        <img src={item.detailImg} /></a>
                                </div>
                                <div className="left-info">
                                    <h3 className="el">{item.title}</h3>
                                    <div><span>#{item.category}</span></div>
                                </div>
                            </div>
                        </CheckboxItem>
                    </li>)
                })
            }
        }
        return (
            <div className="myLike">
                <header>
                    <NavBar
                        mode="light"
                        icon={<Icon type="left" />}
                        onLeftClick={() => this.props.history.push("/my")}
                        rightContent={<span ref="edit" onClick={($event) => { workLikeData && workLikeData.length !== 0 ? this.edit($event) : Toast.info("没有喜欢的视频", 1) }}>编辑</span>}
                    >
                        我的喜欢
                    </NavBar>
                </header>
                <main>
                    <ul className="cl">
                        {workLikeList}
                    </ul>
                </main>
                <footer ref="foot">
                    <div onClick={() => this.empty()}>清空喜欢视频</div>
                    <div ref="delete" onClick={() => this.del()}>删除</div>
                </footer>
            </div>
        )
    }
}